var game=function (w_num,b_num){
	self = this;
	this.imgs=document.getElementsByTagName('img');
	this.b_num=b_num||4;
	this.w_num=w_num||12;
	this.canvas = null;
	this.cobj=null;
	//块的宽度
	this.width = 0;
	//块的高度
	this.height = 0;
	//块的数组
	this.blockList = [];
	//定时器id
	this.t=0;
	//所得分数
	this.score=0;
	//判断游戏成败
	this.flag=true;
	this.run=function (e){
		this.__init();
		document.addEventListener('touchmove',function(e){e.preventDefault()},false);
	  	document.addEventListener('touchstart',this.gameM,false);
	}
	this.gameM=function(e){
		if(!self.flag){
			return;
		}
		var touchX = e.changedTouches[0].pageX;
		var touchY = e.changedTouches[0].pageY;
		for (var i = self.blockList.length-4; i < self.blockList.length; i++) {
			if(self.blockList[i].length>3){
				var bwhite=self.blockList[i];
			}
		}
		if(touchY>3*self.canvas.height/4 && touchX>bwhite[0] && touchX<bwhite[0]+self.canvas.width/4){
			//点击时的样式和结果
			self.clickStyle(touchX,touchY,"#ccc");
			setTimeout(function(){
				// 滚动
				self.slide();
				// 得分计算
				self.score++;
				switch (true){
					case self.score==1:
	                var music=document.getElementById('music');
					music.play();
					music.style.left=0+'px';
					break;
					
					case self.score==10:
					self.writeScore(self.score+'分,升级啦');
					break;
	                
					case self.score==25:
					self.writeScore(self.score+'分,又升级啦');
					break;

					case self.score==45:
					self.writeScore(self.score+'分,又升级啦');
					break;

					case self.score==55:
					self.writeScore(self.score+'分,快通关啦');
					break;

	                case self.score==60:
					self.flag=false;
					self.writeScore('通关啦');
					music.pause();
					break;
				}
			},200)
		}else{
			//点击错误
			self.clickStyle(touchX,touchY,"rgba(255,0,0,0.5)");
			self.flag=false;
			music.pause();
			self.writeScore('游戏结束,总'+self.score+'分');
		}
	}
	//写入分数
	this.writeScore=function (context){
		self.cobj.beginPath();
		self.cobj.font='bold 20px Arial';
		self.cobj.fillStyle="red";
		var conLen=self.cobj.measureText(context).width;
		self.cobj.save();
		self.cobj.rotate(Math.PI/10);
		self.cobj.fillText(context,(window.innerWidth-conLen)/1.5,(window.innerHeight-16)/4.5);
		self.cobj.restore();
		self.cobj.closePath();
	}
	//点击的样式
	this.clickStyle=function (clickX,clickY,color){
		var left=window.innerWidth/4*Math.floor(4*clickX/window.innerWidth);
		var top=window.innerHeight/4*Math.floor(4*clickY/window.innerHeight);
		self.cobj.beginPath();
		self.cobj.fillStyle = color;
		self.cobj.fillRect(left,top,window.innerWidth/4,window.innerHeight/4);
		self.cobj.closePath();
	}
	//初始化，创建画面
	this.__init=function (){
		this.canvas=document.getElementById('canvas');
		this.canvas.width=window.innerWidth;
		this.width=this.canvas.width/4-1;
		this.canvas.height=window.innerHeight;
		this.height=this.canvas.height/4-1;
		this.cobj=this.canvas.getContext('2d');
		self.line();
		// 循环创建
		for (var i = 0; i < 4; i++) {
			var white=Math.floor(Math.random()*4);
			for (var j = 0; j < 4; j++) {
				if(j==white){
					
					var img_index=this.tagImg(true,j*(this.width+1),i*(this.height+1));
					//保存贴图信息
					this.blockList.push([j*(this.width+1),i*(this.height+1),img_index,'白']);
					continue;
				}else{
					this.cobj.fillRect(j*(this.width+1),i*(this.height+1),this.width,this.height);	
					var img_index=this.tagImg(false,j*(this.width+1),i*(this.height+1));
					this.blockList.push([j*(this.width+1),i*(this.height+1),img_index]);
				}
			}
		}
		
	}
	//贴图方法(flag为真时候贴白图，假贴黑图)
	this.tagImg=function (flag,x,y,img_index){
		if(flag){
			//flag为真,贴白图
			var n=img_index||(Math.floor(Math.random()*this.b_num)+this.w_num);
			this.cobj.drawImage(self.imgs[n],x,y,self.width,self.height);
			return n;
		}else{
			//为假，贴黑图
			//参数img_index有可能是0，就是默认为假
			if(img_index==0){
				var m=0;
			}else{
				var m=img_index||Math.floor(Math.random()*this.w_num);
			}
			this.cobj.drawImage(self.imgs[m],x,y,self.width,self.height);
			return m;
		}
	}
	//画线
	this.line=function (){
		this.cobj.beginPath();
		this.cobj.strokeStyle='black';
		for (var i = 1; i < 4; i++) {
			this.cobj.moveTo(0,i*this.canvas.height/4);
			this.cobj.lineTo(this.canvas.width,i*this.canvas.height/4);
			this.cobj.stroke();
		}
		for (var i = 1; i < 4; i++) {
			this.cobj.moveTo(i*this.canvas.width/4,0);
			this.cobj.lineTo(i*this.canvas.width/4,this.canvas.height);
			this.cobj.stroke();
		}
		this.cobj.closePath();	
	}
	//动画
	this.slide=function (){
		//清空屏幕
		self.cobj.clearRect(0,0,self.canvas.width,self.canvas.height);
		// 加线
		self.line();
		//数组的前3行下移一行
		var temp=[];
		for (var i = 0; i < self.blockList.length-4; i++) {
			if(self.blockList[i].length>3){
				//如果是白的
				var img_index=self.tagImg(true,self.blockList[i][0],self.blockList[i][1]+self.height+1,self.blockList[i][2]);
				temp.push([self.blockList[i][0],self.blockList[i][1]+self.height+1,img_index,'白']);
				continue;
			}else{
				self.cobj.fillRect(self.blockList[i][0],self.blockList[i][1]+self.height+1,self.width,self.height);	
				var img_index=self.tagImg(false,self.blockList[i][0],self.blockList[i][1]+self.height+1,self.blockList[i][2]);
				temp.push([self.blockList[i][0],self.blockList[i][1]+self.height+1,img_index]);	
			}
		}
		//清空块数组，添加新的一行
		self.blockList=[];
		var white1=Math.floor(Math.random()*4);
		for (var i = 0; i < 4; i++) {
			if(i==white1){
				var img_index=self.tagImg(true,i*(self.width+1),0);
				self.blockList.push([i*(self.width+1),0,img_index,'白']);
				continue;
			}else{
				self.cobj.fillRect(i*(self.width+1),0,self.width,self.height);
				var img_index=self.tagImg(false,i*(self.width+1),0);
				self.blockList.push([i*(self.width+1),0,img_index]);
			}
		}
		//合并temp数组
		for (var i = 0; i < temp.length; i++) {
			self.blockList.push(temp[i]);	
		}
	}
	
}
window.onload=function(){
	var obj=new game(12,4);
	obj.run();
}








































